<template>
<div class="card-password-Edit views-container">
    <div class="wlm-form">
        <div class="wlm-form-header"><span>您正在向 <span class="orders-blue">{{title}}</span> 添加卡密数据</span>
        </div>
        <div class="wlm-form-content">
            <div class="big-warning flex-row" style="margin-top:0;">
                <p>注意：每个字段下的数据，最长50个字符</p>
            </div>
            <!-- <input v-model="name" type="text" placeholder="请输入姓名"/>
<p id="output" v-py.upperfirst="name"></p> -->
            <el-form ref="user" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="0" class="retail-form" label-position="right">
                <el-form-item>
                    <el-table :data="formFormatData.formData.key_list" style="width: 100%">
                        <el-table-column v-for="(item, index) in categoryData" :key="index" :label="item.name"  min-width="130">
                            <template slot-scope="scope">
                                <el-input maxlength="50" style="width:110px;" v-model="scope.row.key_value[index]"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" min-width="140" >
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button v-if="scope.$index!=0" class="wlm-text" type="text" @click="delLibrary(scope.$index)">删除</el-button>
                                    <span class="orders-gray" v-if="scope.$index==0">不可删除，每次添加至少1条数据</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" style="margin-top:10px;" size="small" @click="addField"><i class="el-icon-plus"></i>新增一个卡密</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveDialogForm" type="primary">保存</el-button>
        <router-link tag="span" :to="{path:'/application/cardPasswordEdit', query :{ kammi_id: $route.query.kammi_id}}">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  kammiDetail,
  keyAdd
} from '@/api/application'
import mixins from '@/mixins/mixins'
require('../../utils/vue-py.js')
export default {
  mixins: [mixins.getters('Form')],
  name: 'CardPasswordEdit',
  components: {
  },
  computed: {
  },
  created() {
    kammiDetail({ kammi_id: this.$route.query.kammi_id }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData.kammi_field
      this.title = msgData.kammi_title
      const keyValue = []
      this.categoryData.map((item, index) => {
        keyValue.push('')
      })
      this.formFormatData.formData.key_list.push({ key_value: keyValue })
    })
  },
  data() {
    return {
      title: '',
      name: '',
      categoryData: [],
      formFormatData: {
        key: 'user',
        model: {
          noCreateEdit: false
        },
        api: {
          submitForm: keyAdd
        },
        formData: {
          kammi_id: this.$route.query.kammi_id,
          key_list: []
        }
      }
    }
  },
  methods: {
    delLibrary(index) {
      this.formFormatData.formData.key_list.splice(index, 1)
    },
    saveDialogForm() {
      const result = []
      this.formFormatData.formData.key_list.map(item => {
        item.key_value.map(childrenItem => {
          result.push(childrenItem)
        })
      })
      var hasIndex = result.findIndex(tItem => { return tItem === '' })
      if (hasIndex !== -1) {
        this.$message.error('保存失败，数据不能为空')
      } else {
        this.formFormatSubmit({ router: { type: 'replace', path: '/application/cardPasswordEdit', code: 1, query: { kammi_id: this.$route.query.kammi_id } } })
      }
    },
    addField() {
      const keyValue = []
      this.categoryData.map((item, index) => {
        console.log(item, 'item')
        console.log(index, 'index')
        keyValue.push('')
      })
      this.formFormatData.formData.key_list.push({ key_value: keyValue })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-password-Edit {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

    /deep/ .el-table__header thead .is-leaf {
        background-color: #f2f2f2 !important;
        text-align: center;
    }

    /deep/ .el-table__header thead .is-leaf {
        height: 32px;
        padding: 10px 0;
    }

}
</style>
